<template>  
  <view class="chat-container">  
	<view class="chat-title">
		<view class="title_one">
			<text>何兰香</text>
			<image src="@/static/chux/head.svg" mode="aspectFill"></image>
		</view>
		<view class="title_two">
			<text>玄武湖一日游</text>
			<view class="no">
				<text>未出行</text>
			</view>
		</view>
	</view>
    <view class="chat-messages">  
      <scroll-view scroll-y="true" class="message-list"> 
			<view class="revise" v-if="revise">
				<view class="revise_one">
					<text>修改后会立即通知对方</text>
					<text>你需要等待对方同意修改</text>
				</view>
				<view class="revise_two">
					<text class="two">取消出行</text>
					<text>修改出行</text>
				</view>
				<view class="revise_three">
					<view class="left">
						<text class="top">启程日期</text>
						<text class="bottom">2023/8/27</text>
					</view>
					<view class="mid">
						<text class="top">启程时间</text>
						<text class="bottom">2:00PM</text>
					</view>
					<view class="right">
						<text class="top">结束时间</text>
						<text class="bottom">5:00PM</text>
					</view>
				</view>
				<view class="revise_four">
					<text>确认</text>
					<text class="two">取消</text>
				</view>
			</view>
			<view v-for="(message, index) in messages" :key="index" class="message-item"> 
			  <text>我</text>
			  <view class="eee">
				<view class="message-content" :class="{ 'self': message.isSelf }">
				  {{ message.content }}
				</view>   
				<view class="message-time">{{ message.time }}</view> 
			  </view> 
			</view>
		</scroll-view>  
    </view>  
    <view class="chat-input">  
      <view class="inputbox">
			<input v-model="inputMessage" style="background-color: transparent;" class="input-text" type="text" placeholder="请写..." @confirm="sendMessage" />
			<view @click="sendVoiceMessage">
					  <image src="../../static/voice.svg" mode="aspectFit"></image>
			</view>
      </view>
	  <view @click="sendVoiceMessage">
			<image src="../../static/send.svg" mode="aspectFit" @click="sendMessage"></image>
	  </view>  
	  <view @click="sendVoiceMessage">
			<image src="../../static/feed.svg" mode="aspectFit" @click="revise=true"></image>
	  </view>  
    </view>  
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {
		revise:false,
		messages: [],  
		inputMessage: '',  
		recording: false,  
		recorderManager: uni.getRecorderManager()  
    };  
  },  
  methods: {  
    sendMessage() {  
      if (this.inputMessage.trim() === '') {  
        return;  
      }  
      const message = {  
        content: this.inputMessage,  
        isSelf: true,  
        time: this.getFormattedTime()  
      };  
      this.messages.push(message);  
      this.inputMessage = ''; 
    },  
    sendVoiceMessage() {  
      if (this.recording) {  
        this.stopRecording();  
      } else {  
        this.startRecording();  
      }  
    },  
    startRecording() {  
      const options = {  
        duration: 60000, // 指定录音的时长，单位 ms  
        sampleRate: 44100, // 采样率，支持 8000/16000/44100/48000  
        numberOfChannels: 1, // 录音通道数，支持 1/2  
        encodeBitRate: 192000, // 编码比特率，支持 32000 ~ 192000，根据需要在 setRecorderOptions 里设置范围值，iOS 平台可以在此范围内调节录音质量和体积的平衡点，安卓平台会忽略此设置，使用固定的质量压缩，压缩结果接近于 128kbps 的 mp3 文件体积（安卓平台录音结果为 aac 格式）  
        format: 'mp3', // 音频格式，默认为 mp3，安卓平台支持设为 aac，iOS 仅支持 mp3  
        frameSize: 50 // 指定音频每一帧的大小，单位 ms，安卓平台不支持此设置，录音结果其实每一帧都是设定的时长。如果设定了 frameSize，必须保证设定的时长能被录音总时长整除，否则会录音失败。例如设定录音总时长为 60s，帧时长为 10s，则实际会按照 10s, 10s, 10s, 10s, 10s, 10s 进行录音。iOS 平台不支持此设置。  
      };  
      this.recorderManager.start(options);  
      this.recording = true;  
      setTimeout(() => {  
        this.stopRecording();  
      }, options.duration);  
    },  
    stopRecording() {  
      this.recorderManager.stop();  
      this.recording = false;   // 获取录音文件的路径或链接  
	  const recordedFilePath = this.recorderManager.getFilePath(); // 假设 getFilePath() 方法可以获取到文件路径  

      const message = {  
        content: '语音', // 这里可以添加语音文件的处理逻辑，如上传到服务器并获取链接等。  
        isSelf: true,  
        time: this.getFormattedTime()  
      };  
      this.messages.push(message);  
    }, 
	playVoiceMessage(message) {  
	
	    if (message.audioUrl) {  
	
	      uni.createInnerAudioContext().src = message.audioUrl; // 设置音频文件的地址  
	
	    }  
	
	  },  
	
	  getDurationFormat(audioUrl) {  
	
	    // 从音频文件路径中获取时长信息并格式化为 xx:xx 格式  
	
	    // 假设 audioUrl 包含时长信息，你需要根据实际情况进行解析和格式化  
	
	    const durationSeconds = parseInt(audioUrl.split(':')[1]); // 解析时长秒数  
	
	    const minutes = Math.floor(durationSeconds / 60);  
	
	    const seconds = durationSeconds % 60;  
	
	    return `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;  
	
	  },  
	//时间
    getFormattedTime() {  
      const date = new Date();  
      const hours = date.getHours().toString().padStart(2, '0');  
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;  
    }  
  }
}
</script>


<style lang="scss">
	page{
		background-color: #FFFFFF;
		height: 100%;
	}
	.chat-container{
		display: flex;
		flex-direction: column;
		align-items: center;
		.chat-title{
			height: 150rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			.title_one,.title_two{
				display: flex;
				justify-content: center;
				height: 35rpx;
				text{
					width: 200rpx;
					font-size: 35rpx;
					font-weight: 700;
					color: rgba(33, 37, 41, 1);
				}
			}
			.title_one{
				image{
					height: 50rpx;
					width: 50rpx;
				}
				text{
					width: 120rpx;
					font-size: 35rpx;
				}
			}
			.title_two{
				display: flex;
				align-items: center;
				width: 500rpx;
				height: 70rpx;
				border-radius: 40rpx;
				border: 2rpx solid rgba(0, 0, 0, 1);
				text{
					font-size: 30rpx;
				}
				.no{
					width: 130rpx;
					height: 45rpx;
					border-radius: 20rpx;
					background: rgba(217, 72, 15, 0.2);
					text-align: center;
					text{
						color:rgba(217, 72, 15, 1);
					}
				}
			}
		}
		.chat-messages{
			padding-top: 30rpx;  
			height: 1000rpx;
			.message-item{
				display: flex;
				flex-direction: column;
				align-items: end;
				padding-bottom: 30rpx;  
				text{
					width: 45rpx;
					height: 45rpx;
					border-radius: 10rpx;
					background: rgba(217, 72, 15, 0.6);
					font-size: 30rpx;
					font-weight: 700;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					margin-bottom: 15rpx;
				}
				.eee{
					border-right: 10rpx solid rgba(217, 72, 15, 0.6);
					width: 500rpx;
					height: 100%;
					vertical-align: top;
					.message-content{
						font-size: 35rpx;
						font-weight: 400;
						text-align: left;
					}
					.message-time{
						font-size: 20rpx;
						font-weight: 700;
						color: rgba(134, 142, 150, 1);
						text-align: right;
					}
				}
			}
			.revise{
				width: 600rpx;
				height: 450rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				.revise_one{
					display: flex;
					flex-direction: column;
					text{
						font-size: 30rpx;
						font-weight: 400;
						color: rgba(66, 65, 65, 1);
						text-align: center;
						vertical-align: top;
					}

				}
				.revise_two{
					display: flex;
					justify-content: space-between;
					width: 460rpx;
					text{
						padding: 5rpx 10rpx 5rpx 10rpx;
						width: 200rpx;
						border-radius: 5px;
						border: 1px solid rgba(232, 89, 12, 0.8);
						text-align: center;
						font-size: 30rpx;
						font-weight: 400;
					}
					.two{
						border: 1px solid #000000;
					}

				}
				.revise_three{
					display: flex;
					justify-content: space-between;
					width: 550rpx;
					.left,.mid,.right{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 175rpx;
						height: 100rpx;
						text-align: center;
						.top{
							font-size: 35rpx;
							font-weight: 700;
						}
						.bottom{
							font-size: 25rpx;
							font-weight: 400;
						}
					}
					.mid{
						border-radius: 10px;
						border: 1px solid rgba(232, 89, 12, 0.8);
						padding: 12rpx 0 12rpx 0;  
					}
				}
				.revise_four{
						display: flex;
						justify-content: space-between;
						width: 350rpx;
						text{
							padding: 5rpx 30rpx 5rpx 30rpx;
							width: 100rpx;
							border-radius: 25rpx;
							background: rgba(232, 89, 12, 0.8);
							text-align: center;
							color: #FFFFFF;
						}
						.two{
							border: 1px solid #000000;
							background: #FFFFFF;
							color: #000000;
						}
				}
			}
		}
		.chat-input{  
			position: fixed;  
			bottom: 40rpx;
			width: 600rpx;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.inputbox{
				width: 405rpx;
				height: 60rpx;
				border-radius: 20rpx;
				border: 2rpx solid rgba(0, 0, 0, 1);
				display: flex;
				align-items: center;
			}
			image{
				height: 40rpx;
				width: 40rpx;
				padding: 0 10rpx 0 10rpx;
			}
		}
	}
	
</style>